import {
  getInterfaceInfoVoByIdUsingGet,
  invokeInterfaceInfoUsingPost,
} from '@/services/gek-api-backend/interfaceInfoController';
import { PageContainer } from '@ant-design/pro-components';
import { useParams } from '@umijs/max';
import { Button, Card, Descriptions, Form, FormProps, Input, message, Switch } from 'antd';
import { useEffect, useState } from 'react';
import dayjs from 'dayjs';
/**
 * 详情页面
 * @returns
 */
const Detail: React.FC = () => {
  const { id } = useParams();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceInfoVO>();
  const [returnMessage, setreturnMessage] = useState<any>();

  const loadData = async () => {
    setLoading(true);
    // 获取接口列表
    await getInterfaceInfoVoByIdUsingGet({ id: Number(id) })
      .then((res) => {
        setData(res.data);
        setLoading(false);
      })
      .catch((err) => {
        message.error(err.message);
      });
  };

  useEffect(() => {
    loadData();
  }, []);
  type FieldType = {
    requestParams?: string; // 请求参数
  };
  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    setLoading(true);
    await invokeInterfaceInfoUsingPost({
      id: Number(id),
      ...values,
    })
      .then((res) => {
        if (res) {
          setreturnMessage(res.data);
          setLoading(false);
        }
      })
      .catch((err) => {
        setLoading(false);
        message.error(err);
      });
  };
  const createTime = dayjs(data?.createTime).format('YYYY-MM-DD HH:mm:ss');
  const updateTime = dayjs(data?.updateTime).format('YYYY-MM-DD HH:mm:ss');
  return (
    <PageContainer title="详情页">
      {data ? (
        <>
          <Card>
            <Descriptions title={data.name}>
              <Descriptions.Item label="接口状态">
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  checked={data.status === 1}
                />
              </Descriptions.Item>
              <Descriptions.Item label="描述">{data.description}</Descriptions.Item>
              <Descriptions.Item label="请求地址">{data.url}</Descriptions.Item>
              <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
              <Descriptions.Item label="请求参数">{data.requestParams}</Descriptions.Item>
              <Descriptions.Item label="请求头">{data.requestHeader}</Descriptions.Item>
              <Descriptions.Item label="响应头">{data.responseHeader}</Descriptions.Item>
              <Descriptions.Item label="创建时间">{createTime}</Descriptions.Item>
              <Descriptions.Item label="更新时间">{updateTime}</Descriptions.Item>
            </Descriptions>
          </Card>
          <Card loading={loading}>
            <Form
              name="basic"
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}
              style={{ maxWidth: 600 }}
              initialValues={{ remember: true }}
              autoComplete="off"
              layout="vertical"
              onFinish={onFinish}
            >
              <Form.Item<FieldType>
                label="请求参数:"
                name="requestParams"
                rules={[{ required: true, message: 'Please input your username!' }]}
              >
                <Input.TextArea />
              </Form.Item>
              <Form.Item wrapperCol={{ span: 16 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </Card>
          <Card>{returnMessage}</Card>
        </>
      ) : (
        <></>
      )}
    </PageContainer>
  );
};

export default Detail;
